import { Button, message, Table } from 'antd'
import React, { useState } from 'react'
import useMounted from '../../hooks/useMounted'
import api from '../../http/index'
import EditDialog from './components/editDialog'
import { columns } from './constant'

const AlarmPlatfromPage = () => {
  const [isOpenShow, $isOpenShow] = useState(false)
  const [list, $list] = useState([])
  const [currentData, $currentData] = useState({})
  const [messageApi, contextHolder] = message.useMessage()

  useMounted(() => {
    initData()
  })

  // 获取数据
  const initData = async () => {
    messageApi.loading('数据加载中...')
    await api.AlarmPlatformApi.getAll()
      .then((res) => {
        if (res && res.code === 200) {
          $list(res.data)
        }
      })
      .finally(() => {
        messageApi.destroy()
      })
  }

  // 修改规则
  const editRuler = (id) => {
    $isOpenShow(true)
    $currentData(id)
  }

  // 新增规则
  const addRuler = () => {
    $currentData(null)
    $isOpenShow(true)
  }

  // 删除规则
  const deleteRuler = (id) => {
    try {
      api.RuleApi.deleteRule({ uuid: id })
        .then((res) => {
          initData()
          messageApi.success('删除数据成功！')
        })
        .catch((err) => {
          console.log(err)
          messageApi.error('出错啦～')
        })
    } catch (error) {}
  }

  const updateRuleStatus = (status, record) => {
    record = { ...record, status, last_execution_time: 0 }
    api.RuleApi.updateStatus(record)
      .then((res) => {
        console.log(res)
        initData()
        messageApi.success('更新数据成功！')
      })
      .catch((err) => {
        console.log(err)
      })
  }

  const doHandleRefresh = () => {
    // 子组件内有数据修改，回调这里需要重新刷新
    initData()
  }

  return (
    <div
      style={{
        position: 'relative',
        display: 'flex',
        flexDirection: 'column',
        margin: '20px',
      }}
    >
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <h1 style={{ fontSize: 22, paddingBottom: 10 }}>告警渠道（群）配置</h1>
        <div
          style={{
            justifyContent: 'flex-end',
            alignItems: 'end',
            display: 'flex',
            marginBottom: 30,
          }}
        >
          <Button
            type="dashed"
            size="small"
            style={{ marginRight: '10px' }}
            onClick={initData}
          >
            刷新
          </Button>
          <Button type="primary" size="small" onClick={addRuler}>
            新增告警渠道
          </Button>
        </div>
      </div>

      <Table
        size="small"
        columns={columns(editRuler, deleteRuler, updateRuleStatus)}
        dataSource={list}
        style={{ flex: 1, overflow: 'auto', borderRadius: 8, height: '100vh' }}
        scroll={{
          x: 2000,
        }}
      />
      <EditDialog
        isShow={isOpenShow}
        current={currentData}
        oncloseFun={() => $isOpenShow(false)}
        handleRefresh={() => doHandleRefresh()}
      />
      {contextHolder}
    </div>
  )
}

export default AlarmPlatfromPage
